<h2 style="display: none;" class="accordion-header" id="book-panel-header-{{book.BookID}}">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" attr.data-bs-target="#book-panel-collapse-{{book.BookID}}" aria-expanded="true" attr.aria-controls="book-panel-collapse-{{book.BookID}}">
        <span class="author">{{book.Author}}</span>&nbsp;-&nbsp;<span class="title">{{book.Title}}</span>
        <div class="labels">
            <span *ngIf="book.NrOfPages" class="pagecount badge bg-light text-dark">{{book.NrOfPages}} pages</span>
            
            <span class="ReadStatus badge bg-primary" *ngIf="readStates.Reading.matches(book.ReadStatus)"><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-book-half"></i> Reading</span>
            <span class="ReadStatus badge bg-info text-dark" *ngIf="readStates.ToRead.matches(book.ReadStatus)" ><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-book"></i> To Read</span>
            <span class="ReadStatus badge bg-success" *ngIf="readStates.Read.matches(book.ReadStatus)"><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-book-fill"></i> Read</span>
            <span class="ReadStatus badge bg-danger" *ngIf="readStates.WontRead.matches(book.ReadStatus)"><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-x"></i> Won't read</span>
            <span class="ReadStatus badge bg-secondary" *ngIf="readStates.Unknown.matches(book.ReadStatus)"><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-patch-question"></i> Unknown</span>
        </div>
    </button> 
</h2>
<div  style="display: none;" id="book-panel-collapse-{{book.BookID}}" class="accordion-collapse collapse collapsed" attr.aria-labelledby="book-panel-header-{{book.BookID}}" >
    <div class="accordion-body">
        <div *ngIf="book.Description" class="description" [innerHTML]="getBookDescriptionHtml()"></div>
        <div class="edit btn-group btn-group-sm " role="group" aria-label="Actions">
            <a [routerLink]="['/book', book.BookID]" type="button" class="btn btn-primary">Edit book details</a>
        </div>
        <app-book-readstatus-updater [(book)]="book"></app-book-readstatus-updater>
    </div>
</div>



<mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        <span class="author">{{book.Author}}</span>&nbsp;-&nbsp;<span class="title">{{book.Title}}</span>
        
      </mat-panel-title>
      <mat-panel-description>
        <div class="labels">
            <span *ngIf="book.NrOfPages" class="pagecount badge bg-light text-dark">{{book.NrOfPages}} pages</span>
            
            <span class="ReadStatus badge bg-primary" *ngIf="readStates.Reading.matches(book.ReadStatus)"><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-book-half"></i> Reading</span>
            <span class="ReadStatus badge bg-info text-dark" *ngIf="readStates.ToRead.matches(book.ReadStatus)" ><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-book"></i> To Read</span>
            <span class="ReadStatus badge bg-success" *ngIf="readStates.Read.matches(book.ReadStatus)"><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-book-fill"></i> Read</span>
            <span class="ReadStatus badge bg-danger" *ngIf="readStates.WontRead.matches(book.ReadStatus)"><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-x"></i> Won't read</span>
            <span class="ReadStatus badge bg-secondary" *ngIf="readStates.Unknown.matches(book.ReadStatus)"><i title="{{book.ReadRemark}}" style="color: white;" class="bi bi-patch-question"></i> Unknown</span>
        </div>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div *ngIf="book.Description" class="description" [innerHTML]="getBookDescriptionHtml()"></div>
        <div class="edit btn-group btn-group-sm " role="group" aria-label="Actions">
            <a [routerLink]="['/book', book.BookID]" type="button" class="btn btn-primary">Edit book details</a>
        </div>
    <app-book-readstatus-updater [(book)]="book"></app-book-readstatus-updater>
  </mat-expansion-panel>